<template>
  <Panel class="flow-car-analysis" second>
    <template #title>
      <div class="flow-car-title">
        <div>{{ titleText }}</div>
        <div class="title" v-if="titleShow">
          <span class="guest-van">
            <span class="guest">客车</span>
            <span class="van">货车</span>
          </span>
        </div>
      </div>
    </template>

    <div class="pie-chart">
      <carAnalysis
        :pieChartData="pieChartData"
        type="accounted"
        :guestAccounted="guestAccounted"
        :vansAccounted="vansAccounted"
      >
      </carAnalysis>
    </div>
    <div class="introduce" v-if="bottomShow">
      <div class="south-guest-car">入省客车</div>
      <div class="south-van-car">入省货车</div>
      <div class="north-guest-car">出省客车</div>
      <div class="north-van-car">出省货车</div>
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'GuestVansAnalysis'
}
</script>
<script setup>
/**
 * 客货分析
 * @author 阳坤（1194636148@qq.com）
 * @date   时间：2022/10/24
 */

import Panel from '../../components/panel'
import carAnalysis from '../../components/car-analysis/index.vue'
import { toRefs, defineProps } from 'vue'

const props = defineProps({
  pieChartData: {
    type: Array,
    default: () => [] // 饼图数据
  },
  // 客车占比
  guestAccounted: {
    type: [Number, String]
  },
  // 货车占比
  vansAccounted: {
    type: [Number, String]
  },
  colorList: {
    type: Array,
    default: () => [] // 饼图颜色
  },
  //  标题内容
  titleText: {
    type: [String],
    default: '客货分析'
  },
  // 标题右侧legend是否显示
  titleShow: {
    type: Boolean,
    default: false
  },
  // 底部legend是否显示
  bottomShow: {
    type: Boolean,
    default: false
  }
})
const { pieChartData, guestAccounted, vansAccounted, colorList } = toRefs(props)
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.flow-car-analysis {
    width: 28%;
    display: flex;
    flex-direction: column;

    .flow-car-title {
        height: 100%;
        display: flex;
        justify-content: space-between;

        .title {
            display: flex;
            justify-content: flex-end;

            .car-name {
                font-weight: 600;
                color: #333333;
                font-size: 14px;
                word-break: keep-all;
            }

            .guest-van {
                display: flex;
                width: 100px;
                justify-content: space-between;

                .guest,
                .van {
                    display: flex;
                    align-items: center;
                }

                .guest:before,
                .van:before {
                    content: "";
                    width: 10px;
                    height: 10px;
                    border-radius: 3px;
                    display: inline-block;
                    margin-right: 4px;
                }

                .guest:before {
                    background: @primary-color;
                }

                .van:before {
                    background-color: #19bbce;
                }
            }

        }
    }

    .pie-chart {
        display: flex;
        text-align: center;
        align-items: center;
        flex: 1;
        justify-content: space-between;

        .accounted {
            line-height: 14px;
            font-weight: 700;

            .number {
                font-size: 24px;
            }
        }

        .guest-car {
            color: @primary-color;
        }

        .van-car {
            color: #00B4C9;
        }

        .analysis-chart {
            position: relative;
            width: 120px;
            height: 120px;

            .waveform {
                width: 61px;
                height: 56px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) // height: 170px;

            }
        }
    }

    .introduce {
        display: flex;
        flex-wrap: wrap;

        .south-guest-car,
        .north-guest-car {
            width: 50%;
            text-align: left;
        }

        .south-van-car,
        .north-van-car {
            width: 50%;
            text-align: right;
        }

        .south-guest-car:before,
        .south-van-car:before,
        .north-guest-car:before,
        .north-van-car:before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 3px;
            display: inline-block;
            margin-right: 4px;
        }

        .south-guest-car:before {
            background: #4287fe;
        }

        .south-van-car:before {
            background: #34d6e9;
        }

        .north-guest-car:before {
            background: @primary-color;
        }

        .north-van-car:before {
            background: #19bbce;
        }
    }
}
</style>
